<template>
  <div>
    <!-- <h3 :style="{ margin: '16px 0' }">Small Size</h3> -->
    <a-input
      placeholder="请输入查询条件"
      style="width: auto; margin-right: 8px"
    />
    <a-button type="primary" style="margin-right: 8px">搜索</a-button>
    <a-button type="primary" style="margin-right: 8px" @click="addshowModal"
      >新增</a-button
    >
    <!-- <a-button type="primary" style="margin-right: 8px" @click="editList"
      >修改</a-button
    >
    <a-button type="primary" style="margin-right: 8px" @click="deleList"
      >删除</a-button
    > -->
    <a-list size="small" bordered style="width: 31%">
      <a-list-item
        v-for="(item, index) in listData"
        :key="index"
        @click="clickListItem(item.id, item.roleName)"
      >
        {{ item.roleName }}
        <template #actions>
          <a key="list-loadmore-edit" @click="editList">编辑</a>
          <!-- 删除确认 -->
          <!-- <a-popconfirm title="？">
            <template #icon>
              <question-circle-outlined style="color: red" /></template>
              <a key="list-loadmore-more" @click="deleList">删除</a>
          </a-popconfirm> -->
          <a key="list-loadmore-more" @click="deleList">删除</a>
        </template>
      </a-list-item>

      <!-- <template #header>
      <div>Header</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template> -->
    </a-list>
    <!-- <template #actions>
      <a key="list-loadmore-edit">edit</a>
      <a key="list-loadmore-more">more</a>
    </template> -->
    <!-- 新增/编辑 -->
    <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: false, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username" />
          <!-- <a-input v-model:value="formState.username" /> -->
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
interface FormState {
  username: string;
}
export default defineComponent({
  setup() {
    const listData = ref([
      {
        id: 1,
        roleName: "role01",
      },
      {
        id: 2,
        roleName: "role02",
      },
      {
        id: 3,
        roleName: "role03",
      },
      {
        id: 4,
        roleName: "role04",
      },
    ]);
    let roleId: number;
    let userName: string;
    // let roleName: RoleName;
    const clickListItem = (itemId: number, userName: any) => {
      roleId = itemId;
      formState.username = userName;
      // userName = userName;
      // console.log('userName',userName)
      console.log(roleId);
    };
    /* 删除 */
    const deleList = () => {
      listData.value = listData.value.filter((e: any) => {
        return e.id != roleId;
      });
    };
    /* 新增 */
    const formState = reactive<FormState>({
      username: "",
    });
    const onFinish = (values: any) => {
      console.log("Success:111", values);
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log("Failed111:", errorInfo);
    };
    /* 编辑 */
    const editList = () => {
      showModal();
    };
    /* 新增/编辑 */
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };

    const addshowModal = () => {
      formState.username = "";
      visible.value = true;
    };
    const handleOk = (e: MouseEvent) => {
      console.log("e", formState.username);
      for (let i in listData.value) {
        if (listData.value[i].id == roleId) {
          listData.value[i].roleName = formState.username;
          visible.value = false;
          return;
        }
      }
      listData.value.push({
        roleName: formState.username,
        id: listData.value.length + 1,
      });
      visible.value = false;
    };
    // const ok = () => {
    //   console.log("点击")
    // }

    return {
      listData,
      clickListItem,
      deleList,
      /* 新增编辑 */
      visible,
      showModal,
      handleOk,
      //
      formState,
      onFinish,
      onFinishFailed,
      /* 编辑 */
      editList,
      addshowModal,
    };
  },
});
</script>

<style>
.ant-list .ant-list-item:active {
  background: #eee;
  user-select: none;
}
</style>
